<template>
  <div class="page-account" :style="{ backgroundImage: 'url(' + backgroundImageMo + ')'}">
		<div class="form">
			<img src="@/assets/img/tb.png" class="logo">
			<!-- <img v-if="logo" :src="$baseUrl+logo" class="logo"> -->
		  <el-form ref="form" :model="form" label-width="60px">	
			<el-form-item label="账号">
			    <el-input v-model="form.uname"></el-input>
			  </el-form-item>
			  <el-form-item label="密码">
			      <el-input type="password" v-model="form.upwd"></el-input>
			    </el-form-item>
			  <el-form-item label="验证码">
					<div style="display: flex;justify-content: space-between;">
								  <el-input v-model="code" 
									@input="changeCodeInput"
									placeholder="请输入验证码" style="width: 280px"></el-input>
								  <img :src="imgCodeUrl" @click="getCodeImg()" alt="">
							  </div>
			  </el-form-item>
				
				<el-form-item label="">
				    <el-button @click="login" style="width: 100%;margin-top: 10px;" type="primary">
						登录
					</el-button>
				  </el-form-item>
			</el-form>
		</div>
  </div>
</template>

<script>
import "@/assets/js/canvas-nest.min.js";
export default {
  data() {
    return {
      backgroundImageMo: require("@/assets/img/bg.jpg"),
	  form:{
		  uname:"",  // 
		  upwd:'' ,//  
	  },
	  imgCodeUrl:"",
	  code:"",
	  logo:""
	}
  },
  created() {

  },
  mounted() {
	  this.imgCodeUrl =`${this.$domain}/index/verification?rand=${Math.random()}`
	this.logo = sessionStorage.getItem('logo')
  },
  beforeCreate() {
	document.getElementsByTagName("canvas")[0].className = "index_bg";
  },

  methods: {
	  changeCodeInput(){
		  
	  },
	  getCodeImg(){
	  			this.imgCodeUrl =`${this.$domain}/index/verification?rand=${Math.random()}`
	  			this.code = ''
	  		},
	login(){
		this.form.code = this.code
		this.$api.post('/admin/login',this.form).then(res=>{
			  if(res.code==200){
			  	sessionStorage.setItem('token',res.data.token)
				sessionStorage.setItem('company_name',res.data.company_name)
			  	if(res.data.job_id){
					sessionStorage.setItem('job_id',res.data.job_id)
					this.lodeMenu(res.data.job_id)
				}else{
					this.$message.error('该用户未分配岗位')
				}
			  }else{
				  this.code = ''
				  // this.form.uname = ''
				  //  this.form.upwd = ''
				   this.getCodeImg()
				  this.$message.error(res.msg)
			  }
		})
	},
	lodeMenu(job_id){
		this.$api.post('/system/getMenuByJobId',{job_id}).then(result=>{
			if(result.data.length){
					let menuList = result.data.filter((item)=>{
						return item.parent_id == 0
					})
					console.log(menuList,111111)
					for(let ele of menuList){
						let arr = result.data.filter((element)=>{
							return element.parent_id == ele.id
						})
						ele.children = arr
					}
					console.log(menuList,22222)
					sessionStorage.setItem('menuList',JSON.stringify(menuList))
					 this.$router.push('deskTop/home')
				}else{
					this.$message.error('该岗位未分配权限')
				}
		})
	},
  },
  beforeRouteLeave(to, from, next) {
	this.backgroundImageMo = ''
	document.getElementsByTagName("canvas")[0].className = ''
	next()
  },
}
</script>

<style lang="scss" scoped>
	.page-account{
	  height: 100vh;
	  overflow: auto;
	  .form{
		  text-align: center;
		  width: 500px;
		  background-color: #fff;
		  position: relative;
		  z-index: 100;
		  margin: 0 auto;
		  top:120px;
		  border-radius: 10px;
		  padding: 20px 50px;
	  }
	  .logo{
		  width: 100px;
		  height: 100px;
		  margin-bottom: 20px;
		  border-radius: 10px;
	  }
	}
    
</style>
